<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script src="loginSpecial/js/jquery-2.1.1.min.js"></script>

  	<script type="text/javascript" src="web/js/echarts.common.min.js"></script></head>
  
  <body>
    <div style="margin-top: 5%; text-align: center;">
    	<div id="sale" style="height: 400px;width: 80%;display: inline-block;"></div>
		<div id="number" style="height: 400px;width: 80%;display: inline-block;"></div>
    </div>
  </body>
    <script>
    	$(function(){
    		var true_number=[];
    		var out_number=[];
    		var sale_money=[];
    		var month=[];
    		var expected_money=[];
    		
    		$.ajax({
    			url:'/kxmanage/grossprofit/getSaleData',
    			type:'post',
    			dataType:'json',
    			success:function(data){
    				if(data!=null){
    					month=data.month;
    					sale_money=data.sale_money;

    					for(var i=0;i<sale_money.length;i++){
    						if(i%2==0){
		    					expected_money.push(sale_money[i]+30000);
    						}else{
		    					expected_money.push(sale_money[i]-20000);
    						}
    					}
    					
			    		var myChart1 = echarts.init(document.getElementById('sale'));
			    		//var myChart2 = echarts.init(document.getElementById('number'));
			
				        // 指定图表的配置项和数据
				        var option1 = {
				            title: {
				                text: '毛利润走势'
				            },
				            tooltip: {
					            trigger: 'axis',
					        	axisPointer: {
						            type: 'cross',
						            crossStyle: {
						                color: '#999'
						            }
					        	}
				        	},
				            legend: {
						        data:['销售金额','销售预期']
						    },
				            xAxis: {
				                data: month
				            },
				            yAxis: [
						        {
						            type: 'value',
						            name: '金额',
						            min: 0,
						            axisLabel: {
						                formatter: '{value} ￥'
						            }
						        }
				            ],
				            series: [{
				                name: '销售金额',
				                type: 'line',
				                data: sale_money//,
        						//smooth: true
				            },{
				                name: '销售预期',
				                type: 'line',
				                data: expected_money//,
        						//smooth: true
				            }]
				        };
				        /* var option2 = {
				            title: {
				                text: '出库情况'
				            },
				            tooltip: {
					            trigger: 'axis',
					        	axisPointer: {
						            type: 'cross',
						            crossStyle: {
						                color: '#999'
						            }
					        	}
				        	},
				            legend: {
						        data:['出库数量','实际数量']
						    },
				            xAxis: {
				                data: month
				            },
				            yAxis: [
						        {
						            type: 'value',
						            name: '出库数量',
						            min: 0,
						        }
				            ],
				            series: [{
				                name: '出库数量',
				                 backgroundColor:'#289731',
				                type: 'bar',
				                data: out_number
				            },{
				                name: '实际数量',
				                type: 'bar',
				                data: true_number
				            }]
				        }; */
				
				        // 使用刚指定的配置项和数据显示图表。
				        myChart1.setOption(option1);
				        //myChart2.setOption(option2);
    				}
    			}
    		
    		});
    	});
    </script>
</html>
